<template>
  <div class="container">
    <van-nav-bar
      placeholder
      title="详情"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :style="{ position: 'fixed', top: 0, left: 0, width: '100%' }"
    />
    <div class="image-container">
      <van-image round :src="arr.img_big_logo" />
    </div>
    <van-row justify="space-between" :style="{ marginTop: '10px' }">
      <van-col span="20">{{ arr.title }}</van-col>
    </van-row>
    <van-row justify="space-between" :style="{ marginTop: '10px' }">
      <van-col span="20">{{ arr.category }}{{ arr.goods_id }}</van-col>
    </van-row>
    <van-row justify="space-between" :style="{ marginTop: '10px' }">
      <van-col span="20">{{ arr.price }}</van-col>
    </van-row>
    <van-action-bar placeholder>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" to="/about" />
      <van-action-bar-icon
        icon="star"
        text="已收藏"
        :color="iconcolor"
        @click="onClickIcon"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="jrgwc(arr.goods_id)"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
  <van-dialog
    v-model:show="showSuccessDialog"
    title="提示"
    show-cancel-button
    @confirm="closeDialog"
  >
    <div class="van-div">加入成功</div>
  </van-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from '../xyq.js'

let iconcolor = ref('gray')
let flgg = true
const showSuccessDialog = ref(false)

const onClickIcon = () => {
  if (localStorage.getItem('user')) {
    if (flgg) {
      iconcolor.value = 'red'
      flgg = false
    } else {
      iconcolor.value = 'gray'
      flgg = true
    }
  } else {
    router.push('/login')
    showToast('请先登录')
  }
}

const jrgwc = oid => {
  if (!localStorage.getItem('user')) {
    router.push('/login')
  } else {
    axios
      .post(
        'http://localhost:8888/cart/add',
        {
          goodsId: oid,
          id: localStorage.getItem('user'),
        },
        {
          headers: {
            Authorization: localStorage.getItem('token'),
          },
        },
      )
      .then(res => {
        console.log(res.data)
        showSuccessDialog.value = true
      })
      .catch(error => {
        console.error(error)
        showToast('加入失败')
      })
  }
}

const route = useRoute()
const router = useRouter()
const arr = ref({})

const onClickLeft = () => router.back()
const onClickRight = () => router.push('/login')

onMounted(() => {
  const routeParams = route.params.arr
  arr.value = JSON.parse(routeParams)
})

const closeDialog = () => {
  showSuccessDialog.value = false
}
</script>

<style scoped>
.van-image {
  margin-bottom: 10px;
}

.container {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.van-row {
  margin-bottom: 10px;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #06b45c;
}

.image-container {
  margin: 0 auto;
  width: 50%;
}

.van-div {
  text-align: center;
}
</style>
